// ----------------------------- 获取分类，渲染到页面中 ---------------------------
// 直接封装成函数，方便调用这个函数重新渲染页面
//****获取类别列表，渲染到页面中*****
//render --> 渲染 ;  category --> 类别
function renderCategory () {
    $.ajax({
        url: '/my/category/list',
        success: function (res) {
            // console.log(res);
            //判断
            if (res.status === 0) {
                // 把数据 通过模板引擎 渲染到页面中
                let html = template('tpl-list', res);
                // 把html放到tbody中
                $('tbody').html(html);
            }
        }
    });
}
// 调用函数
renderCategory();


//______________ 删除分类 __________________
//注册单击事件 --> 询问是否删除 --> 调用接口完成删除
$('tbody').on('click', '.del', function () { 
    //获取事件源的data-id属性值,这个值就是分类的id
    // let id = $(this).attr('data-id')
    let id = $(this).data('id')//jQuery中,专门获取 data-xxx 属性值
    //询问
    layer.confirm('确定删除么？', function (index) { 
        //按照接口,发送请求
        $.ajax({
            url: '/my/category/delete',
            data: { id: id },
            success: function (res) {
                // console.log(res);
                // 无论删除成功，还是失败，都给出提示
                layer.msg(res.message);
                // 删除成功，调用函数重新渲染页面
                if (res.status === 0) {
                    renderCategory();
                }
            }
        })
        layer.close(index) //关闭窗口
    
    })
})

//_____________ 添加分类 ______________________
let addIndex
//注册单击事件 --> 点击 ---> 出现弹层
$('.add').on('click', function () { 
        addIndex = layer.open({
        //基本层类型
        type: 1,
        //标题
        title: '添加类别',
        //弹层内容 :  内容在HTML中 
        content: $('#tpl-add').html(), 
        //弹层宽高
        area: ['500px', '250px']
    });
})
//添加的表单提交
$('body').on('submit', '#add-form', function (e) { 
    //阻止默认行为
    e.preventDefault();
    // 看接口文件,确定name属性,用 serialize()获取; 一定要检查input是否有正确的name属性
    let data = $(this).serialize(); 
    // ajax提交数据，完成添加
    $.ajax({
        type: 'POST',
        url: '/my/category/add',
        data: data,
        success: function (res) {
            // 无论成功失败，都提示
            layer.msg(res.message);
            // 添加成功
            if (res.status === 0) {
                renderCategory();
                // 关闭弹层
                layer.close(addIndex);
            }
        }
    });
})

//_____________ 编辑分类 ______________________
//比添加多一步数据回填
//点击编辑 显示弹层
let editIndex
$('body').on('click', 'button:contains("编辑")', function () {
    // 获取事件源的三个 data-xxx 属性值
    // let shuju = $(this).data(); //分开填的
    let data = $(this).data(); //layui  快速填的
    // console.log(shuju); // { name: 'xx', alias: 'xx', id: 2 }
    // editIndex 表示当前的弹层；关闭弹层的时候，需要用到它
    editIndex = layer.open({
        type: 1,
        title: '编辑分类',
        content: $('#tpl-edit').html(),
        area: ['500px', '250px'],
        // 弹层弹出后的回调，是弹层的属性,  和ajax中的success不一样
        success: function () {
            //弹层成功后,执行什么代码,放这里
            // 数据回填(不要忘记id) 快速数据回填
            let form = layui.form
            form.val('category', data)
            //分开填
            // $('#edit-form input[name="name"]').val(shuju.name);
            // $('#edit-form input[name="alias"]').val(shuju.alias);
            // $('#edit-form input[name="id"]').val(shuju.id);
        }
    });
});
//提交表单
$('body').on('submit', '#edit-form', function (e) {
    //阻止默认事件
    e.preventDefault();
    // 收集表单各项值
    let data = $(this).serializeArray();
    // ajax提交，完成修改
    $.ajax({
        type: 'POST',
        data: data,
        url: '/my/category/update',
        success: function (res) {
            // 无论成功，还是失败，都给出提示
            layer.msg(res.message);
            if (res.status === 0) {
                //调用函数渲染页面
                renderCategory();
                // 关闭弹层
                layer.close(editIndex);
            }
        }
    });
})